<template>
	<div class="" :class="[BottomStu?'PwdKeyTrue':'PwdKeyFalse','PwdKey']">
		<div class="PwdKey-Body">
			<div class="PwdKey-Bd">
				<div class="PwdKey-Num">
					<div class="PwdKey-Number">
						<div class="KeyDown" v-for="item in Num" @click.stop="ClickNum(item)" @touchstart="ClickStart($event)" @touchend="ClickEnd($event)">{{item}}</div>
					</div>
					<div class="PwdKey-Zero">
						<div class="KeyDown KeyDowntz" @click.stop="ClickNum(0)" @touchstart="ClickStart($event)" @touchend="ClickEnd($event)" :class="Xs?'KeyDowntzTrue':''">0</div>
						<div class="KeyDown" style="height: 100%;" @click.stop="ClickNum('.')" @touchstart="ClickStart($event)" @touchend="ClickEnd($event)" :class="Xs?'KeyDownTrue':''">.</div>
					</div>
				</div>
				<div class="PwdKey-Option">
					<div class="PwdKey-Del" @click.stop='Del' @touchstart="ClickStart($event)" @touchend="ClickEnd($event)">
						<img src="static/img/Index/Del.png" style="width: 50%;" />
					</div>
					<div class="PwdKey-Find">
						完成
					</div>
				</div>
			</div>
		</div>
	</div>
</template>	

<script>
	export default {
		name: 'KeyOnly',
		data() {
			return {
				BottomStu: false,
				Num: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				NumData: '',
				DotNum: 0,
				Ipnt: true,
				Xs: false
			}
		},
		methods: {
			ClickNum(num) {
				if(this.Ipnt) {
					this.NumData += num;
				}
			},
			Del() {
				this.NumData = this.NumData.substring(0, parseInt(this.NumData.length) - 1)
				this.bus.$emit('DelS', 1);
				this.Ipnt = true
			},
			ClickStart(e) {
				e.target.classList.add('PwdStart')
			},
			ClickEnd(e) {
				e.target.classList.remove('PwdStart')
			},
		},
		mounted() {
			var vm = this;
			this.bus.$on('BottomStu', function(BottomStu) {
				vm.BottomStu = BottomStu
			})
		},
		watch: {
			NumData(e) {
				if(this.NumData[0]=='.') {
					this.NumData = this.NumData.substring(0, parseInt(this.NumData.length) - 1)
				} else {
					if(this.NumData.split('.')[1] != undefined) {
						if(this.NumData.split('.')[1].length > 2) {
							this.Ipnt = false;
							this.NumData = this.NumData.substring(0, parseInt(this.NumData.length) - 1)
						} else {
							this.NumData = this.NumData.split('.')[0] + '.' + this.NumData.split('.')[1];
							this.bus.$emit('NumData', this.NumData);
						}
					} else {
						this.NumData = this.NumData.split('.')[0];
						this.bus.$emit('NumData', this.NumData);
					}

				}

			}
		}
	}
</script>

<style scoped="scoped">
	.PwdKey {
		width: 100%;
		height: 550px;
		position: absolute;
		left: 0;
		transition: .5s;
		-webkit-user-select: none;
		/*webkit浏览器*/
	}
	
	.PwdKeyFalse {
		bottom: -550px;
	}
	
	.PwdKeyTrue {
		bottom: 0;
	}
	
	.PwdKey-Body {
		width: 100%;
		height: 100%;
	}
	
	.PwdKey-None {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFF;
		border-top: 1px solid #e2e2e2;
	}
	
	.PwdKey-None>i {
		font-size: 42px;
		color: #C2C2C2;
	}
	
	.PwdKey-Bd {
		width: 100%;
		height: 100%;
		display: flex;
		background-color: #FFF;
	}
	
	.PwdKey-Num {
		width: 75%;
		height: 100%;
	}
	
	.PwdKey-Option {
		width: 25%;
		height: 100%;
	}
	
	.PwdKey-Number {
		width: 100%;
		height: 75%;
		background-color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.PwdKey-Zero {
		width: 100%;
		height: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.KeyDown {
		width: calc(100% / 3);
		height: calc(100% / 3);
		box-sizing: border-box;
		border-right: 1px solid #e2e2e2;
		border-top: 1px solid #e2e2e2;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 42px;
	}
	
	.KeyDowntz {
		width: calc(100% / 3 + 100% /3);
		height: 100%;
	}
	
	.KeyDowntzTrue {
		width: 100%;
	}
	
	.KeyDownTrue {
		display: none;
	}
	
	.PwdKey-Del,
	.PwdKey-Find {
		width: 100%;
		height: 50%;
		font-size: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
	}
	
	.PwdKey-Del {
		border-top: 1px solid #e2e2e2;
	}
	
	.PwdKey-Find {
		background-color: #F9A01F;
	}
	
	.PwdStart {
		background-color: #E2E2E2;
	}
	
	.PwdEnd {
		background-color: #FFF;
	}
</style>